<!-- 用于在列表中展示一个员工或工人的头像、姓名、手机号等信息。 -->
<script setup lang="ts">
const props = defineProps<{
  avatar?: string
  name: string
  identity: string
  phoneNumber: string
  isShowCheckbox?: boolean
  isSelected?: boolean
  isCallOnTap?: boolean
}>()

function handlePhoneCall() {
  uni.makePhoneCall({
    phoneNumber: props.phoneNumber,
    fail: () => { uni.showToast({ title: '取消呼叫', icon: 'none' }) },
  })
}

function handleTap() {
  if (props.isCallOnTap)
    handlePhoneCall()
}
</script>

<template>
  <view class="flex justify-between items-center px-30rpx py-36rpx bg-white" hover-class="bg-#F8F8F8" @tap="handleTap">
    <view class="flex items-center">
      <Checkbox v-if="isShowCheckbox" :checked="isSelected" />
      <Spacer v-if="isShowCheckbox" width="20" />
      <image class="w-72rpx h-72rpx rounded-72rpx bg-#F8F8F8" :src="avatar" />
      <Spacer width="12" />
      <view class="text-28rpx leading-28rpx text-secondary">
        {{ name }}
      </view>
      <Spacer width="12" />
      <view class="px-10rpx py-5rpx text-24rpx leading-24rpx text-brand bg-#FFEEE2 rounded-full">
        {{ identity }}
      </view>
    </view>
    <view class="text-28rpx leading-28rpx text-secondary">
      {{ phoneNumber }}
    </view>
  </view>
</template>
